<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>部门信息页面</title>
		<!-- 引入 element-ui 样式文件，需要网络，否则失效 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入 vue 文件，使用本地下载的-->
		<script type="text/javascript" src="js/vue.min.js"></script>
		<!-- 引入 axios 库文件，使用本地下载的-->
		<script type="text/javascript" src="js/axios.min.js"></script>
		<!-- 引入组件库文件，需要网络，否则失效 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column fixed prop="id" label="部门编号" width="160">
					</el-table-column>
					<el-table-column prop="deptname" label="部门名称" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[0].id" label="员工编号" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[0].empName" label="员工姓名" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[0].gender" label="员工性别" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[0].salary" label="员工工资" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[0].deptid" label="员工所属部门编号" width="160">
					</el-table-column>
					
					<el-table-column prop="employeeList[1].id" label="员工编号" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[1].empName" label="员工姓名" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[1].gender" label="员工性别" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[1].salary" label="员工工资" width="160">
					</el-table-column>
					<el-table-column prop="employeeList[1].deptid" label="员工所属部门编号" width="160">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="200">
						<template slot-scope="scope">
							<el-button @click="getById" type="text" size="small">查看</el-button>
							<el-button type="text" size="small">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		
		<!-- 引入外部 js 文件 -->
		<script src="js/common.js"></script>
		
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					// 查询所有信息数组声明
					tableData: [],
				},
				methods: {
					// 查询所有信息方法
					loadDept() {
						axios.get("/dept/getDeptAll")
						.then(r => {
							if (r.data.code == 200) {
								vm.tableData = r.data.data
								console.log(r.data.data)
							} else {
								this.$message.error('查询失败');
							}
						})
					},
					// 查询详细信息方法
					getById() {
						this.$message.success('点我干什么，宝贝？')
					}
				},
				// 加载时执行
				created() {
					this.loadDept();
				},
			})
		</script>
	</body>
</html>